<div class="modal fade" id="modal-oauth2" tabindex="-1" role="dialog" aria-labelledby="modal-oauth2" aria-hidden="true">
  <form id="form-oauth2">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><span data-i18n="modalOAuth2Title">OAuth 2.0</span>
            <small class="text-muted m-l-sm" data-i18n="modalOAuth2Intro">Get new access token</small>
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
            <!-- oauth2-authorization -->
            <div class="form-group row required" data-code data-credentials>
              <label for="oauth2-grant-type" class="col-sm-3 col-form-label" data-i18n="modalOAuth2GrantType">Grant type</label>
              <div class="col-sm-9" style="line-height: 34px;">
                <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                  <input class="form-check-input" type="radio" name="oauth2-grant-type" id="oauth2-grant-type-code" value="authorization_code" data-type="code" checked>
                  <label class="form-check-label" for="oauth2-grant-type-code" data-i18n="modalOAuth2GTAC">
                    Authorization code
                  </label>
                </div>
                <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                  <input class="form-check-input" type="radio" name="oauth2-grant-type" id="oauth2-grant-type-credentials" value="client_credentials" data-type="credentials">
                  <label class="form-check-label" for="oauth2-grant-type-credentials" data-i18n="modalOAuth2GTCC">
                    Client credentials
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group row required" data-code data-credentials>
              <label for="oauth2-client-id" class="col-sm-3 form-control-label" data-i18n="modalOAuth2ClientId">Client id</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-client-id" placeholder="rKGCVb7Z7b7Z8sVW" data-i18n="modalOAuth2ClientIdInput" data-i18n-target="placeholder">
                <small id="oauth2-client-id-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2ClientIdInputHelper">Client id must be filled out</small>
              </div>
            </div>
            <div class="form-group row required" data-code data-credentials>
              <label for="oauth2-client-secret" class="col-sm-3 form-control-label" data-i18n="modalOAuth2ClientSecret">Client secret</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-client-secret" placeholder="4pL5Vxtsk673USqwN5aJAwtJ6a6pdvzgzHsM9V83VZTbevMn" data-i18n="modalOAuth2ClientSecretInput" data-i18n-target="placeholder">
                <small id="oauth2-client-secret-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2ClientSecretInputHelper">Client secret must be filled out</small>
              </div>
            </div>
            <div class="form-group row" data-code data-credentials>
              <label for="oauth2-scope" class="col-sm-3 form-control-label" data-i18n="modalOAuth2Scope">Scope</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-scope" placeholder="Scope" data-i18n="modalOAuth2ScopeInput" data-i18n-target="placeholder">
              </div>
            </div>
            <div class="form-group row" data-code>
              <label for="oauth2-state" class="col-sm-3 form-control-label" data-code data-i18n="modalOAuth2State">State</label>
              <div class="col-sm-9">
                <div class="input-group">
                  <input type="text" class="form-control" id="oauth2-state" placeholder="OAuth state" readonly data-i18n="modalOAuth2StateInput" data-i18n-target="placeholder">
                  <span class="input-group-addon d-inline-block abc-checkbox abc-checkbox-dark">
                    <input type="checkbox" id="oauth2-state-auto" checked="true" aria-label="Checkbox for following text input">
                    <label for="oauth2-state-auto" data-i18n="modalAuto">
                      Auto
                    </label>
                  </span>
                </div>
              </div>
            </div>
            <div class="form-group row required" data-code data-credentials>
              <label for="oauth2-grant-type" class="col-sm-3 col-form-label" data-i18n="modalOAuth2RequestMethod">Request Method</label>
              <div class="col-sm-9" style="line-height: 34px;">
                <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                  <input class="form-check-input" type="radio" name="oauth2-request-method" id="oauth2-request-method-post" value="post" checked>
                  <label class="form-check-label" for="oauth2-request-method-post" data-i18n="modalOAuth2RMPost">
                    POST
                  </label>
                </div>
                <div class="form-check abc-radio d-inline-block m-b-none m-r-md">
                  <input class="form-check-input" type="radio" name="oauth2-request-method" id="oauth2-request-method-get" value="get">
                  <label class="form-check-label" for="oauth2-request-method-get" data-i18n="modalOAuth2RMGet">
                    GET
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group row required" data-code>
              <label for="oauth2-authorization-endpoint" class="col-sm-3 form-control-label" data-i18n="modalOAuth2AuthEP">Authorization endpoint</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-authorization-endpoint" placeholder="https://github.com/login/oauth/authorize" data-i18n="modalOAuth2AuthEPInput" data-i18n-target="placeholder">
                <small id="oauth2-authorization-endpoint-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2AuthEPInputHelper">Authorization endpoint must be filled out</small>
              </div>
            </div>
            <div class="form-group row required" data-code data-credentials>
              <label for="oauth2-token-endpoint" class="col-sm-3 form-control-label" data-i18n="modalOAuth2TokenEP">Token endpoint</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-token-endpoint" placeholder="https://github.com/login/oauth/access_token" data-i18n="modalOAuth2TokenEPInput" data-i18n-target="placeholder">
                <small id="oauth2-token-endpoint-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2TokenEPHelper">Token endpoint must be filled out</small>
              </div>
            </div>
            <div class="form-group row required" data-code>
              <label for="oauth2-redirect-endpoint" class="col-sm-3 form-control-label" data-i18n="modalOAuth2RedirectEP">Redirect endpoint</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="oauth2-redirect-endpoint" placeholder="http://restclient.net/auth/github/callback" data-i18n="modalOAuth2RedirectEPInput" data-i18n-target="placeholder">
                <small id="oauth2-redirect-endpoint-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2RedirectEPInputHelper">Redirect endpoint must be filled out</small>
              </div>
            </div>
            <!-- oauth2-authorization -->
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-check abc-checkbox abc-checkbox-danger">
            <input class="form-check-input" id="save-oauth2" type="checkbox">
            <label class="form-check-label" for="save-oauth2" data-i18n="modalOAuth2Remember">
              Remember this setting
            </label>
          </div>
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
          <button type="submit" class="btn btn-primary btn-oauth2-request ladda-button" data-style="expand-right" data-size="s" data-i18n="modalOAuth2RequestToken">Request token</button>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="modal fade" id="modal-oauth2-refresh" tabindex="-1" role="dialog" aria-labelledby="modal-oauth2-refresh" aria-hidden="true">
  <form id="form-oauth2-refresh">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" data-i18n="modalOAuth2RefreshTitle">OAuth 2.0 <small class="text-muted">Refresh access token</small></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body container">

          <!-- oauth2-refresh -->
          <div class="form-group row required">
            <label for="oauth2-refresh-token" class="col-sm-3 form-control-label" data-i18n="modalOAuth2RefreshToken">Refresh token</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="oauth2-refresh-token" placeholder="4pL5Vxtsk673USqwN5aJAwtJ6a6pdvzgzHsM9V83VZTbevMn" data-i18n="modalOAuth2RefreshTokenInput" data-i18n-target="placeholder">
              <small id="oauth2-refresh-token-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2RefreshTokenInputHelper">Refresh token must be filled out for refreshing</small>
            </div>
          </div>
          <div class="form-group row required">
            <label for="oauth2-refresh-endpoint" class="col-sm-3 form-control-label" data-i18n="modalOAuth2RefreshEndpoint">Refreshing endpoint</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="oauth2-refresh-endpoint" placeholder="https://github.com/login/oauth/access_token" data-i18n="modalOAuth2RefreshEndpointInput" data-i18n-target="placeholder">
              <small id="oauth2-refresh-endpoint-helper" class="form-text text-danger helper" style="display: none" data-i18n="modalOAuth2RefreshEndpointInputHelper">Refresh endpoint must be filled out for refreshing</small>
            </div>
          </div>
          <div class="form-group row m-b-xs">
            <label for="oauth2-refresh-scope" class="col-sm-3 form-control-label" data-i18n="modalOAuth2RefreshScope">Scope</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="oauth2-refresh-scope" placeholder="Scope" data-i18n="modalOAuth2RefreshScopeInput" data-i18n-target="placeholder">
            </div>
          </div>
          <!-- oauth2-refresh -->

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
          <button type="submit" class="btn btn-primary ladda-button" data-style="expand-right" data-size="s" data-i18n="modalRefresh">Refresh token</button>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="modal fade" id="modal-oauth2-preview" tabindex="-1" role="dialog" aria-labelledby="modal-oauth2-preview" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form class="form-oauth2-preview">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" data-i18n="modalOAuth2PreviewTitle">OAuth2 Access token</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="table table-hover table-bordered" style="margin: 0;">
            <thead class="thead-inverse">
              <tr>
                <th style="min-width: 20px;">#</th>
                <th data-i18n="modalOAuth2PreviewName">Name</th>
                <th data-i18n="modalOAuth2PreviewValue">Value</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-i18n="modalClose">Close</button>
          <button type="button" class="btn btn-primary btn-oauth2-refresh ladda-button" data-style="expand-right" data-size="s">
            <i class="fa fa-refresh"></i> <span data-i18n="modalRefresh">Refresh</span>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>